<!DOCTYPE html>
<html lang="en" data-framework="web-components">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content="A TodoMVC workload app written with web compnents." />
        <title>TodoMVC: JavaScript Web Components</title>
        <link rel="stylesheet" href="styles/global.css" />
        <link rel="stylesheet" href="styles/header.css" />
        <link rel="stylesheet" href="styles/footer.css" />
		<link rel="stylesheet" href="node_modules/todomvc-common/base.css" />
        <!-- load these first, so that they are registered by the time the app components needs them -->
        <script type="module" src="src/components/todo-topbar/todo-topbar.component.js"></script>
        <script type="module" src="src/components/todo-list/todo-list.component.js"></script>
        <script type="module" src="src/components/todo-bottombar/todo-bottombar.component.js"></script>
        <script type="module" src="src/components/todo-app/todo-app.component.js"></script>
    </head>

    <body>
        <header class="header">
            <a href="#" style="text-decoration: none"><h1 class="title">todos</h1></a>
        </header>
        <todo-app class="todo-app"></todo-app>
        <footer class="footer">
            <p class="footer-text">Double-click to edit a todo</p>
			<p class="footer-text">Created by the TodoMVC Team</p>
			<p class="footer-text">Part of <a href="http://todomvc.com">TodoMVC</a></p>
        </footer>
		<script src="./base.js"></script>
    </body>
</html>
